<!-- fileName: RecommendMV -->
<template>
  <div>
    <div style="margin: 10px 0">
      <span style="font-size: 20px; font-weight: bold; padding: 10px 0;">推荐MV</span>
      <i class="el-icon-arrow-right" style="font-size: 20px"></i>
    </div>
    <el-row>
      <el-col :key="item.id" :span="8" v-for="(item, index) in mvList">
        <div>
          <div class="mvBg">
            <div class="img-tip">
              <span style="padding-left: 10px;">最新热门MV推荐</span>
            </div>
            <img :src="item.picUrl + '?param=290y170'"
                 style="width: 100%; height: 100%"/>
          </div>
          <div class="playCountBg">
            <img :src="playCountIcon" class="playCountIcon"/>
            <div class="playCountSpan">
                <span style="font-size: 12px; color: #fff; vertical-align: top;">
                  {{ unitToThousand(item.playCount) }}
                </span>
            </div>
          </div>
        </div>
        <div style="margin-top: 5px;">
          <span style="font-size: 13px;">{{ item.name }}</span>
        </div>
        <div>
          <span style="font-size: 11px; color: rgba(0, 0, 0, .5)">{{ item.artistName }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import { discoverApi } from '@/api/discover'
  import playCountIcon from '@/assets/img/discover/playCount.png'

  export default {
    data() {
      return {
        mvList: [],
        playCountIcon
      }
    },
    created() {

      this.getMvList()
    },
    methods: {
      async getMvList() {
        // const { data: res } = await this.$http.get('https://autumnfish.cn/personalized/mv')
        discoverApi().getMvList().then(res => {
          if (res.result.length > 3) {
            res.result = res.result.slice(0, 3)
          }
          this.mvList = res.result
        })
      }
    }
  }
</script>


<style lang="less" scoped>
  @import url(@/theme/discover/recommendMv/index.less);
</style>
